<template>
	<view class="tea-room-app">
		<view class="tea-item">
			<image v-if="!teaHouse.images" style="width: 750upx;height:500upx;background-color: #eee;"></image>
			<image v-if="teaHouse.images" :src="teaHouse.images" style="width: 750upx;height:500upx;"></image>
			<view class="tea-house-info">
				<view class="base-info">
					<view class="title">{{teaHouse.name}}</view>
					<view class="address">地址：{{teaHouse.address}}</view>
					<view class="time">营业时间：00:00 - 24:00</view>
				</view>
				<view class="map-point"  @click.stop="showMapInfo(teaHouse)">
					<image src="/static/map-point.png" style="width: 60upx; height:60upx;" />
				</view>
			</view>
		</view>
		<view class="address info-item">
			<view class="icon">
				<image src="../../../static/cal.png" style="width:38upx;height:43upx;" />
			</view>
			<view class="value">{{teaHouse.des}}</view>
		</view>
		<view class="address info-item">
			<view class="icon">
				<image src="../../../static/tel.png" style="width:38upx;height:43upx;" />
			</view>
			<view class="value" @click="callPhone">{{teaHouse.tel}}</view>
		</view>

		<view class="rule info-item">
			<view class="icon">
				<image src="../../../static/room_info.png" style="width:44upx;height:44upx;" />
			</view>
			<view class="value">
				<template  v-if="user.level==0">
					<view class="value-item">普通用户消费标准包厢每小时{{teaConfig.price}}元，2小时起。</view>
					<!--
					<view class="value-item">需要先支付押金{{teaConfig.deposit}}元，消费后余额退还。</view>
					-->
					<view class="value-item">成为会员可享受更多优惠</view>
					<view class="submit-button" @click="toMember" v-if="user.level==0">
						了解会员详情
					</view>
				</template>
				<template  v-if="user.level!=0">
					<view class="value-item">会员消费标准包厢每小时{{teaConfig.vipPrice}}元，2小时起。</view>
				</template>
			</view>
		</view>
		<view class="address info-item" @click="goPage('/pages/tea/house/comment?teaHouseId='+teaHouseId)">
			<view class="icon">
				<image src="../../../static/comment.png" style="width:38upx;height:38upx;" />
			</view>
			<view class="value">评论列表</view>
		</view>
		<!--
		<view class="address info-item" @click="goPage('/pages/tea/house/teaMaster?teaHouseId='+teaHouseId)">
			<view class="icon">
				<image src="../../../static/comment.png" style="width:38upx;height:38upx;" />
			</view>
			<view class="value">茶艺师</view>
		</view>
		-->

		<view class="room-select">
			<view class="head">可选房间</view>
			<view class="items" v-for="(item,key) in listData.items" :key="key">
				<!--
				"remark":"备注","roomId":3,"roomLevel":0,"roomNO":"10001","roomName":"高级",
				-->
				<view class="item" @click="goRoomDetail(item)" v-if="item.roomState==1||item.roomState==5||item.roomState==6">
					<view class="icon">
						<image v-if="!item.images" src="../../../static/default_img.png" style="width:160upx;height:160upx;" />
						<image v-if="item.images" :src="baseHttp+'/image/getByImageId?imageId='+item.images" style="width:160upx;height:160upx;margin-top:0;border-radius: 20upx;" />
					</view>
					<view class="info">
						<view class="name">{{item.roomName}}</view>
						<!--
						<view class="number">编号：{{item.roomNO}}</view>
						-->
						<view class="desc">备注：{{item.remark}}</view>
						<view class="desc">价格：{{item.price/100}}元/小时</view>

            <view :class="'room-status room-status-' + item.roomState">
              <view v-if="item.roomState == 1">
                空闲
              </view>
              <view v-if="item.roomState == 5">
                使用中
              </view>
              <view v-if="item.roomState == 6">
                保洁中
              </view>
            </view>
					</view>

					<!--
					<view class="btn-items">
						<view class="select-btn" v-if="item.roomState===1" @click="goToPay(item, item.teaHouseId)">选择</view>
						<view class="select-btn no-select-btn" v-if="item.roomState!==1">选择</view>
						<view class="select-btn appointment-btn" style="background-color: #1AAD19;margin-top:20upx;" @click="appointmentRoom(item)">预约</view>
					</view>
					-->

				</view>
			</view>
			<view v-if="showCount==0" style="text-align: center;background-color: white;padding:20upx;margin-top:20upx;">暂无可选房间</view>
		</view>
	</view>
</template>

<script>
	import util from '@/libs/util.js'
	import globalConfig from '../../../config'
	const baseHttp = globalConfig.API_HOST

	export default {
	    data() {
	        return {
				baseHttp: baseHttp,
				teaHouseId: '',
				mtCode: '',
        dealgroupId: '',
				showCount: 0,
				map: {

				},
				user: {
					level: 0
				},
				teaHouse: {
					address: "",
					des: "",
					images: "",
					joinTime: "",
					lat: "",
					lon: "",
					name: "",
					remark: "",
					teaHouseId: "",
					tel: ""
				},
				teaConfig: {
					deposit: "",
					vipMoney: "",
					money: "",
					superVipTimes: "",
					subMemberLimit: "",
					remark: ""
				},
				listData: {
					items: []
				},
				statusLabels:['','空闲','','','','使用中', '保洁中']
	        }
	    },
		onLoad(params) {
			this.teaHouseId = params.teaHouseId;
			this.mtCode = params.mtCode;
			this.dealgroupId = params.dealgroupId;
			if (this.mtCode=="undefined") {
				this.mtCode = "";
			}
			if (this.dealgroupId=="undefined") {
				this.dealgroupId = "";
			}
			/*
			console.log("mt code detail:"+this.mtCode);
			console.log(params);
			*/
		},
		onShow() {
			//this.getDataList();
			this.getTeaHouseInfo();
			this.getConfigInfo();
			this.getDataList();
			this.getUserDetail();
		},
		components: {

		},
		computed: {

		},
	    methods: {
			...util,
			callPhone() {
				uni.makePhoneCall({
				    phoneNumber: this.teaHouse.tel //仅为示例
				});
			},
			goRoomDetail(item) {
				this.goPage("/pages/tea/v2/roomDetail?roomId="+item.roomId+"&mtCode="+this.mtCode+"&dealgroupId="+this.dealgroupId );
			},
			showMapInfo(item) {
				//console.log(item);
				//console.log(item);

				if (item.lat && item.lon) {
					//console.log(this.item.latitude)
					//console.log(this.item.longitude)

					uni.openLocation({
						latitude: item.lat,
						longitude: item.lon,
						success: function () {
							console.log('success');
						}
					});

				} else {
					this.$Message.error("当前点位没有设置坐标")
				}

				return true;
				if (this.isLogin) {
					this.goPage("/pages/tea/default/mapDetail?id="+item.teaHouseId)
				}


				return false;
			},
			appointmentRoom(room) {
				this.$api.post('/room/orderRoom', {
					roomId: room.roomId
				}).then((response) => {

					if (response.ret === 1) {
						this.$Message.info("预约成功")
					} else {
						this.$Message.info(response.msg)
					}
				});
			},
			goToPay(room, teaHouseId) {
				if (room.roomState===1 ) {
					if (this.user.level<1) {
						this.goPage('/pages/tea/default/pay?roomId='+room.roomId+'&teaHouseId='+teaHouseId);
					} else {
						this.goPage('/pages/tea/default/vipPay?roomId='+room.roomId+'&teaHouseId='+teaHouseId);
					}
				} else {
					this.$Message.info("当前包厢不可租用")
				}

			},
			getUserDetail() {
				this.$api.post('/user/getInfo', {

				}).then((response) => {
					if (response.ret === 1) {
						/*
						{"data":{"depositMoney":100,"email":"","idNO":"","inviteCode":"5befc431580a4f2b8e9196ef7639ad","joinTime":"2020-12-26 21:57:17","level":2,"money":6944000,"name":"","phone":"13690060020","remark":"","updateTime":"2021-01-01 18:41:35","userId":6,"vipMoney":300},"ret":1}
						*/
						this.user = response.data
					} else {
						this.$Message.info(response.msg)
					}
				})
			},
			toMember() {
				//uni.navigateTo({url: url})
				this.goPage('/pages/tea/default/user?teaHouseId='+this.teaHouse.teaHouseId);
			},
			goPage(url) {
				uni.navigateTo({url: url})
			},
			getTeaHouseInfo() {
				this.$api.post('/teaHouse/getById',
				  {
					teaHouseId: this.teaHouseId
				  }
				).then((response) => {
				  if (response.ret===1) {
					this.teaHouse = response.data
				  } else {
					this.$Message.error(response.msg)
				  }
				});
			},
			getDataList() {
				/*
				{"data":[{"remark":"备注","roomId":3,"roomLevel":0,"roomNO":"10001","roomName":"高级","roomState":0,"roomType":0,"teaHouseId":2,"updateTime":"2020-12-15 16:25:47"},{"remark":"31231","roomId":7,"roomLevel":0,"roomNO":"12312","roomName":"12312","roomState":0,"roomType":0,"teaHouseId":2,"updateTime":"2020-12-23 18:50:20"}],"ret":1,"total":2}
				*/
				uni.showLoading({
					title: '加载中'
				});
				this.$api.post('/room/queryPage',
					{
						teaHouseId: this.teaHouseId,
						mtCode: this.mtCode,
            dealgroupId: this.dealgroupId,
					}
				).then((response) => {
					//for(let i = 0; i )
					//response.data.items = this.setField(response.data, 'show', true);
					//console.log(response.data.items);
					this.listData.items = response.data

					this.showCount = 0;
					for(let i = 0; i < this.listData.items.length; i++) {
						//console.log(this.listData.items[i]);
						//if (this.listData.items[i].roomState===1) {
							this.showCount++;
						//}
					}

					for(let i = 0; i < this.listData.items.length; i++) {
						this.listData.items[i]['roomStateLabel'] = this.statusLabels[this.listData.items[i].roomState];
					}
					uni.hideLoading()
				});
			},
			getConfigInfo() {
				this.$api.post('/teaHouseConfig/getById',
				  {
					teaHouseId: this.teaHouseId
				  }
				).then((response) => {
				  if (response.ret===1) {
					if (response.data) {
					  this.teaConfig = response.data
					  this.teaConfig.price = this.teaConfig.price/100;
					  this.teaConfig.deposit = this.teaConfig.deposit/100;
					  this.teaConfig.vipPrice = this.teaConfig.vipPrice/100;
					}
				  } else {
					this.$Message.error(response.msg)
				  }
				})
			}
	    }
	}
</script>

<style lang="scss">
	page{
		/*height: 100%;*/
	}

	.page-section,.page-body,.tea-manager-app{
		height: 100%;
	}

	.tea-room-app{
		background-color: #F5F4F8;
		height: 100%;
		color:#707070;
		padding-bottom:50upx;
		overflow-x: hidden;
		.isOkRoom{
			color:#1D2C6D;
      padding: 10upx 20upx;
      //background: #1D2C6D;
		}


		.submit-button{
			font-size:30upx;
			/*margin:0 auto;*/
			background-color:#1D2C6D;
			color:white;
			width:300upx;
			height:60upx;
			text-align: center;
			line-height: 60upx;
			margin-top:20upx;
		}
		.tea-item{
			background-color: white;
			/*padding: 20upx;*/
			margin-bottom:20upx;
			display: flex;
			flex-direction: column;
			position: relative;
			.image{

			}
			.map-point{
				width:120upx;
				height:120upx;
				/*background-color: white;*/
				margin-right:20upx;
			}
			.tea-house-info{
				width:100%;
				position: absolute;
				bottom:0;
				/*
				height:120upx;
				margin-top:-160upx;
				*/
				/*
				background-color: black;
				opacity: 0.5;
				*/
				background-color: rgba(0,0,0,0.5);
				padding:20upx;
				color:white;
				font-size:32upx;
				display: flex;
				.base-info{
					flex:1;
				}
				.title{
					font-weight: bold;
				}
				.address{
          font-size: 24rpx;
				}
			}
			.map-item-info{
				display: flex;
				flex-direction: column;
				.map-info{
					text-align: center;
					font-size:24upx;
					/*margin:0 auto;*/
					background-color:#3385FF;
					color:white;

					height:45upx;
					text-align: center;
					line-height: 45upx;
				}
			}
			.content{
				flex: 1;
				.title{
					color:#3385FF;
					font-size:32upx;
				}
			}
		}
		.info-item{
			background-color: white;
			display: flex;
			padding: 20upx;
			font-size:28upx;
			border-bottom: 1upx solid #eee;
			.icon{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.value{
				margin-left:20upx;
			}
		}
		.room-select{
			/*
			margin-left:38upx;
			margin-right:38upx;
			*/
			margin-top:40upx;
			.head{
				font-size:32upx;
				text-indent:20upx;
			}
			.items{
				background-color: white;
				.item{
					display: flex;
					padding: 20upx;
					margin-top:20upx;


					.icon{
						width:160upx;
						height:160upx;
						margin-right:20upx;

					}
					.info{
						flex:1;
						margin-left:20upx;
						font-size:32upx;
            overflow: hidden;
            position: relative;
            .room-status {
              text-align: center; // 文本居中
              position: absolute; // 绝对定位
              background-color: #1D2C6D; // 背景色
              color: #fff;
              font-size: 24upx;
              width: 200upx;
              height: 60upx;
              line-height: 60upx;
              top: 10upx;
              right:-60upx;
              transform: rotate(45deg);
            }

            .room-status-1 {
              background-color: #1D2C6D;
            }

            .room-status-5 {
              background-color: #EB4B17;
            }

            .room-status-6 {
              background-color: #EB4B17;
            }

						.name{
							font-size:32upx;
							color:#4B4B4B;
							font-weight: bold;
						}
						.number{
							font-size:28upx;
							color:#767676;
							margin-top:10upx;
						}
						.desc{
							font-size:28upx;
							color:#767676;
              margin-top: 10upx;
						}
					}

					.select-btn{
						display: none;
						background-color: #1D2C6D;
						color:white;
						width:128upx;
						height:69upx;
						line-height: 69upx;
						font-size:28upx;
						text-align: center;
					}
					.no-select-btn{
						background-color: #eee;
					}
				}
			}
		}
	}

</style>
